<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>修改</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="../resources/favicon.ico">
    <link rel="stylesheet" href="../resources/layui/css/layui.css"
          media="all"/>
    <link rel="stylesheet" href="../resources/css/public.css" media="all"/>
    <link rel="stylesheet"   th:href="@{/resources/ztree/css/zTreeStyle/zTreeStyle.css}" media="all"/>

</head>
<body>
<!--添加和修改弹出层-->
<div id="addOrUpdateDiv" style="padding: 10px;padding-right: 5%">
    <form action="" method="post" class="layui-form" id="dataFrm" lay-filter="dataFrm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-block">
                    <input type="hidden" id="id" name="id" th:value="${role.id}">
                    <input type="text" th:id="name" name="name" lay-verify="required" autocomplete="off"
                           class="layui-input input-radius" placeholder="请输入角色名称" th:value="${role.name}">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">角色备注</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" th:id="remark" th:text="${role.remark}" class="layui-textarea" name="remark" cols="200"></textarea>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">是否可用</label>
                <div class="layui-input-block">
                    <input type="radio" name="available" th:checked="${role.available} == 1?true:false" value="1" title="可用">
                    <input type="radio" name="available" th:checked="${role.available} == 1?false:true" value="0" title="不可用">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">权限菜单</label>
                <div class="layui-input-block">
                    <div id="menuTree" class="ztree"></div>
                </div>
            </div>
        </div>
    </form>
</div>
</body>
<script type="text/javascript" th:src="@{/resources/js/jquery-3.3.1.min.js}"></script>
<script type="text/javascript" th:src="@{/resources/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/resources/ztree/js/jquery.ztree.all.js}"></script>
<script type="text/javascript">
    var ctx = [[@{/}]];
    var id = $("#id").val();
    var checkBoxIds = [];
    layui.use(['layer','tree'], function() {
        var tree = layui.tree;	//树状图
        var layer = layui.layer; //弹层
        var setting = {
            check : {//设置为复选框所需要的
                enable : true,
            },
            view : {
                showLine : true, //显示辅助线
                dblClickExpand : true,
            },
            async: {
                enable: true,
                //初始化树状图的url
                url: ctx + "/menu/menuAllTree?id=" + id,
                type: 'get',
                //异步加载时需要自动提交父节点属性的参数
                //autoParam:["id", "name=n", "level=lv"],
                autoParam: ["id"]
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId",
                    rootPId: 0
                },
                key: {
                    name: 'title'  //指定名称'
                }
            }
        };

        $(function () {
            $.fn.zTree.init($("#menuTree"), setting);
        });

    });

    function submitHandler() {
        var treeObj = $.fn.zTree.getZTreeObj("menuTree");
        var nodes = treeObj.getCheckedNodes(true);
        for ( var i=0 ; i < nodes.length ; i++ ){
            var treeNode = nodes[i];
            checkBoxIds.push(treeNode.id);
        }
        var data = {
            "id": $("#id").val(),
            "name": $("#name").val(),
            "remark": $("#remark").val(),
            "available": $("input[type=radio]:checked").val(),
            "menuIds": checkBoxIds.toString()
        };
        $.getJSON(ctx + "/role/updateRole", data, function(data){
            //根据后台返回的参数，来进行判断
            if(data.code == 0){
                layer.alert("修改成功",{icon:1,title:'提示'},function(i){
                    $("#dataFrm")[0].reset()//重置form
                    window.parent.location.reload();//刷新父页面
                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);
                });
                tableIns.reload()
            } else {
                layer.alert("修改失败，请联系管理员",{icon:2,title:'提示'},function(i){
                    $("#dataFrm")[0].reset()//重置form
                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);
                });
            }
        })
    }


</script>
</html>